<template>
  <div ref="containerRef" class="svg-container absolute top-0 left-0 w-full h-full">
    <slot :width="width" :height="height"></slot>
  </div>
</template>

<script setup lang="ts">
import { ref,onMounted,onBeforeUnmount  } from "vue";
import { throttle } from "lodash";
const containerRef = ref<HtmlElement>();

const width = ref(0);
const height = ref(0);

const updateResize = throttle(()=>{
  width.value = containerRef.value?.clientWidth || 0;
  height.value = containerRef.value?.clientHeight || 0;
},0)

const resizeObserver = ref<ResizeObserver>(new ResizeObserver(updateResize));

onMounted(()=>{
  resizeObserver.value.observe(containerRef.value);
})

onBeforeUnmount(()=>{
  resizeObserver.value.unobserve(containerRef.value);
})
</script>
